<template>
  <div class="app-container">
    <div class="header-wrapper">
      <h1 class="title">肇庆裹蒸粽·千年传承史</h1>
      <div class="title-decoration"></div>
    </div>

    <el-timeline class="history-timeline">
      <el-timeline-item 
        center 
        timestamp="秦汉时期" 
        placement="top"
        v-for="(item, index) in historyData" 
        :key="index"
      >
        <div class="timeline-node">
          <el-card class="history-card">
            <div class="card-content">
              <h2 class="card-title">{{ item.period }}</h2>
              <p class="card-desc">{{ item.content }}</p>
            </div>
            <div class="card-image">
              <img :src="item.image" alt="历史图片">
            </div>
          </el-card>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const historyData = ref([
  {
    period: '秦汉时期',
    content: '肇庆裹蒸粽制作历史可追溯至秦汉时代，当时西江两岸城乡居民已有春节包裹蒸的习俗，人们为方便田间劳作，用竹叶或芒叶裹以大米，煮熟后随身携带作为干粮，这是裹蒸粽的雏形。',
    image: 'https://p5.itc.cn/q_70/images03/20220509/2074b3702e7d4a12b363ecbf05b6e6be.jpeg',
    icon: 'https://via.placeholder.com/120x120/FFDAB9/333?text=秦' // 图标占位图，可替换为竹简图标
  },
  {
    period: '南北朝时期',
    content: '据《南史》记载，南北朝齐明帝时，肇庆产的裹蒸已成为 “贡品”“御食”，可见其在当时已具有较高的品质和地位，从田间地头的干粮走上了宫廷餐桌。',
    image: 'https://img1.baidu.com/it/u=3534638793,3294651386&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    icon: 'https://via.placeholder.com/120x120/FFB980/333?text=南北朝'
  },
  {
    period: '宋代',
    content: '肇庆古称端州，北宋重和元年，宋徽宗将端州易名为肇庆，意为 “开始、吉庆”。在这样的文化背景下，裹蒸粽可能逐渐融入了更多当地的文化元素和吉祥寓意，成为人们生活中具有特殊意义的食物。',
    image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi2%2F2485526940%2FO1CN01gAqsfX218ZMuJlf7O_%21%212485526940-0-lubanu-s.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1750475109&t=162ee9c89f4903189afa1858e5b109e2',
    icon: 'https://via.placeholder.com/120x120/#FFA500/333?text=宋'
  },
  {
    period: '清代',
    content: '清道光《肇庆府志》对裹蒸粽的传统制作方法有相关记载，民间也有顺口溜 “外包冬叶三几片，糯米绿豆放里边，肥肉芝麻作肉馅，裹好扎牢蒸半天”，体现了其近 2000 年的传统特色，反映出当时裹蒸粽的制作工艺已较为成熟，且在当地有着深厚的民间基础。',
    image: 'https://img2.baidu.com/it/u=3461590860,3187544737&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800',
    icon: 'https://via.placeholder.com/120x120/#FF6633/333?text=清'
  },
  {
    period: '近现代',
    content: '2012 年 7 月 18 日，原国家质检总局批准对 “肇庆裹蒸” 实施地理标志产品保护。2009 年，“肇庆裹蒸制作技艺” 被列入省级非物质文化遗产名录。此外，肇庆裹蒸粽的加工制作从家庭作坊式制造逐渐发展到工厂大规模标准化生产，培育出了 “皇中皇”“肥仔伟”“裹香皇” 等知名品牌，成为当地经济发展的特色产业和农产品著名品牌。',
    image: 'https://img0.baidu.com/it/u=3337495057,2428664464&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800',
    icon: 'https://via.placeholder.com/120x120/#4682B4/333?text=现代'
  }
])
</script>

<style scoped>
.app-container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px 20px;
  background: #f7f3e8; /* 浅黄棕色 */
}

.header-wrapper {
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 35px;
  color: #333;
  font-weight: 500;
  margin-bottom: 15px;
}

.title-decoration {
  width: 80px;
  height: 4px;
  background: #ff6633;
  margin: 0 auto;
  border-radius: 2px;
}

.history-timeline {
  max-width: 500px;
  margin: 0 auto;
  margin-left: -40px;
}

.timeline-node {
  display: flex;
  align-items: flex-start;
  position: relative;
}

/* 时间节点图标 */
.node-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 24rpx rgba(255, 102, 51, 0.15);
  margin-left: -20px;
}

/* 卡片样式 */
.history-card {
  flex: 1;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 16rpx 40rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease;
  width: 600rpx;
}

.history-card:hover {
  transform: translateY(-8rpx);
}

.card-content {
  padding: 10px;
}

.card-title {
  color: #ff6633;
  font-size: 28px;
  margin-bottom: 15px;
  text-align: center; 
  position: relative;
  padding-left: 0; 
  padding-left: 40px; 
  text-indent: -40px; 
}

.card-desc {
  color: #666;
  font-size: 16px;
  line-height: 1.8;
}

.card-image {
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.card-image img:hover {
  transform: scale(1.05);
}

/* 时间线主轴 */
.timeline >>> .el-timeline__line {
  border-left: -20rpx dashed #ffe0c8;
  margin-left: -20rpx;
}

/* 响应式调整 */
@media (max-width: 768rpx) {
  .app-container {
    padding: 40px 20px;
  }

  .timeline-node {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .node-icon {
    margin: 0 0 20px;
  }

  .card-image {
    height: 180px;
  }
}
</style>